<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> 修改中的编辑按钮弹框</title>
	</head>
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		.Main{
			width:290px;  			
			margin:0 auto;
			text-align:left;
			padding-left:15px;
			
		}
		.Main p input[type=text]{
			margin-left:5px;
			height:26px;
			width:210px;
			border:1px soild #dadada;
		}
		.Main p input[type=checkbox]{
			position:relative;
			top:5px;
			right:3px;
		}
		.Main p{
			margin-top:5px;
			height:25px;
			line-height:25px;
		}
		input[type=radio]{
			position:relative;
			top:5px;
			left:5px;
		}
		select{
			width:66px;
			height:26px;
			border:1px solid #dadada;
			margin-right:5px;
			font-family:"微软雅黑";
			margin-top:3px;
		}
		.role span{
			display:inline-block;
			width:225px;
			text-align:left;
			margin-top:7px;
		}
		.role span i{
			background:#fea513;
			margin-left:6px;
		}
		.Main{
			height:350px;
			width:400px;
			background:white;
			border:1px solid #ddd;
			margin:0 0 0 15px;
			overflow:auto;
			
		}
		.title{
			line-height:35px;
			margin-left:15px;
		}
		.title b{
			float:right;
		}
		.title span{
			margin-right:14px;
			cursor:pointer;
			color:#00aa98;
		}
		.title span:hover{
			color:red;
		}
		.btn{
			text-align:center;
			padding-top:15px;
			padding-bottom:15px;
		}
		.btn i{
			margin-right:15px;
		}
		
		
		.checkbox{
			margin-left:70px;
			margin-top:10px;
			height:100px;
			background:red;
		}
		.Main p span{
			margin-left:5px;
			font-size:12px;
		} 
		.button_Box{
			height:45px;
			position:fixed;
			bottom:-5px;
			width:100%;
			text-align:center;
			line-height:45px;
		
		}
	</style>
	<body style="padding-bottom:20px;">
	<p class='title'>角色列表<!--<b><span class='checkAll'>全选</span><span class='inverseCheck'>反选</span><span class='cancle'>取消</span></b>--></p>
		<div class='Main'>
		<!--  
			<p><input  type='checkbox' name="role" value="101"/><span>超级管理员</span></p>
		-->
		</div>
		<div style="height:45px;"></div>
		<div class="button_Box" style='text-align:center;'><i class='Dolo_btn accredit'>确定</i></div>
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="../layer-v2.4/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/common.js" ></script>
		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js" charset="utf-8"></script>
		<script>
		//__________________________________________ajax动态加载角色名称数据_____________________________________
		
		$.ajax({
			type:"get",
			url:"../role/query?state=vd&pageNum=1&pageSize=10000&temp="+Math.random(),
			dataType:"json",
			async:false,
			success:function(data){
			
				var str="";
				for(var i=0;i<data.data.list.length;i++){
					str+="<p><input  type='checkbox' name='role' value="+data.data.list[i].id+"><span>"+data.data.list[i].name+"</span></p>"
				}
				$(".Main").append(str);	
			}
		})
		
		//获取父页面传过来的角色数组
		var url = document.location.href.toString();
		 var u = url.split("=");
		 var role_arr=[];//传过来的数组id
		 if(u[1].indexOf(",")==-1){
				role_arr.push(u[1]);
			}else{
				role_arr=u[1].split(",");
			}
    
		 var arr_all=[];//存放本页所有value
		 var len = $("input[name=role]").length	
		 for(var i=0;i<len;i++){
				arr_all.push($("input[name=role]")[i].value)
	          			
			}
		 
       //比较两个数组的大小  相同值的设置为选中项
		 for(var j=0;j<arr_all.length;j++){
			 
			 for(var m=0;m<role_arr.length;m++){
				 if(arr_all[j]==role_arr[m]){
					 $("input[value="+arr_all[j]+"]").prop("checked",true);
				 }
				 
			 }
		 }
		//__________________________________________选择复选框用于传给父页面______________________________________
			
			$(".accredit").click(function(){
				var json = {};
				var len = $("input[name=role]").length				
				var checkArr = [];
				var roleText = [];
				var roleValue = [];
				for(var i=0;i<len;i++){
					if($("input[name=role]")[i].checked){
						checkArr.push(i)
					}
				}
				
				for(var i=0;i<checkArr.length;i++){
					var text = $("input[name=role]").eq(checkArr[i]).parent().text();
					var value = $("input[name=role]").eq(checkArr[i]).val()
					roleText.push(text)
					roleValue.push(value)
				}
				json.value = roleValue;
				json.text = roleText;
				//console.log(json)
				if(roleText.length==0||roleValue.length==0){
					layer.msg("请选择角色",{icon: 2,time:2000},function(){
						return false;
					})
				}else{
					window.parent.getRole(json);
					layer.msg('选择角色成功', {icon: 1,time:1000},function(){
						var index = parent.layer.getFrameIndex(window.name);//获取弹窗索引
						parent.layer.close(index);//关闭弹窗	
					}) 
				}
				
		
			});
			
		
		</script>
	</body>
</html>
